<template>
    <div class="content">
        <a-card class="card">
            <div class="header">
                <div class="button">
                    <a-space>
                        <a-button type="primary" @click="showAddModal">新增</a-button>
                        <a-popconfirm title="确定要删除菜单吗?"
                                      ok-text="Yes"
                                      cancel-text="No"
                                      @confirm="confirm"
                                      @cancel="cancel">
                            <a-button type="primary" danger>删除</a-button>
                        </a-popconfirm>
                    </a-space>

                </div>
                <div class="searchForm">
                    <a-form :model="searchForm">
                        <a-form-item label="">
                            <a-input-search
                                v-model:value="searchForm.name"
                                placeholder="请输入名称"
                                enter-button="搜索"
                                size="large"
                                @search="onSearch"
                            />
                        </a-form-item>
                    </a-form>
                </div>
            </div>
            <div class="tableBox">
                <a-table :loading="loading"
                         :dataSource="tableData"
                         :row-selection="rowSelection"
                         :rowKey="(record , index) => {return record.id}"
                         :indentSize="2000"
                         :columns="columns">
                    <template #status="{ text}">
                        <template v-if="text == 1">
                            <a-tag color="#108ee9">正常</a-tag>
                        </template>
                        <template v-else>
                            <a-tag color="red">冻结</a-tag>
                        </template>
                    </template>

                    <template #action="{record}">
                        <a-button type="link" @click="editHandle(record)">编辑</a-button>
                    </template>
                </a-table>
            </div>
        </a-card>
        <!--  新增弹框      -->
        <common-modal :data="modalData.formState" :visible="modalData.showAdd" :title="modalData.title" :typeName="modalData.typeName" @close="handleClose"></common-modal>
    </div>
</template>

<script>
import {defineComponent, ref, reactive, toRefs, onMounted} from "vue";
import {getAllRoles, addRoleInfo, getRoleInfoById, deleteRoleInfo, updateRoleInfo } from "../../../api";
import commonModal from './components/commonModal.vue'
import {message} from "ant-design-vue";

export default defineComponent({
    name: "index",
    components: {commonModal},
    setup() {
        const tableDataObj = reactive({
            loading: false,
            tableData: [
            ],
            // tableEditKey: [{ title: "customTitle" }, { title: "action" }, {title: 'button'}],
            columns: [
                {
                    title: "序号",
                    // width: 50,
                    align: 'center',
                    customRender: (text) => `${text.index + 1}`
                },
                {
                    title: "角色名称",
                    dataIndex: "name",
                    key: "name",
                    align: 'center',
                    // width: 120,
                    ellipsis: true
                },
                {
                    title: "角色状态",
                    dataIndex: "status",
                    align: 'center',
                    // width: 160,
                    key: "status",
                    ellipsis: true,
                    slots: { customRender: 'status'}
                },
                {
                    title: "角色备注",
                    dataIndex: "remark",
                    key: "remark",
                    align: 'center',
                    // width: 150,
                    ellipsis: true
                },

                {
                    title: "添加时间",
                    dataIndex: "createTime",
                    align: 'center',
                    key: "createTime",
                    // width: 200,
                    ellipsis: true
                },
                {
                    title: "操作",
                    key: "action",
                    align: 'center',
                    // width: 150,
                    slots: {
                        customRender: "action"
                    }
                }
            ]
        })
        const searchForm = reactive({
            name: ''
        })
        // 对话框表单
        const modalData = reactive({
            formState: {},
            showAdd: false,
            title: "",
            typeName: ""
        })
        // table 行选择
        const rowSelection = reactive({
            selectedRowKeys: [],
            onChange: (selectedRowKeys, selectedRows) => {
                rowSelection.selectedRowKeys = selectedRowKeys
                console.log(rowSelection.selectedRowKeys)
            }
        })

        // 编辑角色
        const editHandle = (record) => {
            // console.log(666666, record)
            getRoleInfoById({id: record.id}).then((res)=> {
                if (res.data.code == 200) {
                    // 权限获取成功
                    const result = res.data.data.permissions.map((item) => {
                        return item.id
                    })

                    const temp = {...record, list: result}
                    console.log(888, temp)
                    modalData.formState = temp
                    modalData.title = "编辑角色权限"
                    modalData.showAdd = true
                    modalData.typeName = "edit"
                }
            })

        }

        // 打开新增角色弹框
        const showAddModal = () => {
            // state.addModalVisible = true
            modalData.showAdd = true
            modalData.title = "新增角色"
            modalData.formState = {}
            modalData.typeName = "add"
        }

        // 获取全部角色
        const getRoles = () => {
            getAllRoles({}).then((res)=> {
                console.log('列表', res)
                if (res.data.code == 200) {
                    tableDataObj.tableData = res.data.data
                }
            })
        }

        // 取消删除
        const cancel = () => {
            message.error('取消删除')
        }

        const confirm = () => {
            if (rowSelection.selectedRowKeys.length === 0) {
                message.warning('请先选择数据')
                return
            }
            // 调用删除接口
            // deleteRoleInfo()
            deleteRoleInfo(rowSelection.selectedRowKeys).then((res) => {
                if (res.data.code == 200) {
                    message.success('删除成功')
                    // 刷新列表
                    getRoles()
                }
            })

        }

        // 控制对话框操作
        const handleClose = (val) => {
            if (val.type == 'add') {
                // 调用接口，新增菜单
                // console.log(88888, val)
                // console.log(77777777777, modalData.formState)
                let params = {
                    name: modalData.formState.name,
                    remark: modalData.formState.remark,
                    permissionId: val.checkedKeys,
                }
                addRoleInfo(params).then((res) => {
                    if (res.data.code == 200) {
                        message.success('新增成功')
                        // 刷新列表
                        getRoles()
                    }
                })
                // alert('新增了')
            }
            if (val.type == 'edit') {
                // 调用接口，编辑菜单
                // console.log(88888, val)
                // console.log(2222222222, modalData.formState)
                let params = {
                    id:modalData.formState.id,
                    name: modalData.formState.name,
                    remark: modalData.formState.remark,
                    permissionId: val.checkedKeys,
                }
                updateRoleInfo(params).then((res) => {
                    if (res.data.code == 200) {
                        message.success('修改成功')
                        getRoles()
                    }
                })
                // alert('编辑了')
            }
            if (val == 'cancel') {
                // 点击取消按钮，
                // tableDataObj.tableData = JSON.parse(window.localStorage.getItem('meuns') as any)
            }
            modalData.showAdd = false
        }

        onMounted(()=> {
            getRoles()
        })
        return{
            ...toRefs(tableDataObj),
            searchForm,
            modalData,
            rowSelection,
            showAddModal,
            handleClose,
            editHandle,
            confirm,
            cancel
        }
    }
})
</script>

<style lang="less" scoped>
.content{
    width: 100%;
    height: 100%;

    .card {
        height: 100%;
        //background: #364d79;
        margin: 10px;

        .header{
            display: flex;
            justify-content: space-between;
            align-items: center;

            .button {
                display: flex;
                justify-content: flex-start;
                margin-bottom: 15px;
            }
        }
    }
}
</style>